<template>
	<view class="page">
		<u-navbar title='门店信息' left-icon=" " :bgColor="color" titleStyle="color:white" :placeholder="true"></u-navbar>
		<watermark :sytext='watermark'></watermark>
		<u-notice-bar @click='toPath' url='pages/mine/index' :text="noticeText" :direction='direction'></u-notice-bar>
		<view style="padding:20rpx">
			<view class="content"> 
				<view class="contentInfo">
					<view class="lineColor"></view><view>门店信息</view>
				</view>
				<view class="item">
					<view class="title">
						<text>店铺名称</text>
						<text style="color:#fa3534">*</text>
					</view>
					<view class="input">
						<u-input fontSize='12' clearable v-model.trim='info.storeName' placeholder="请输入门店名称" inputAlign="right"></u-input>
					</view>
				</view>
				
				<view class="item" @click="chooseLoaction">
					<view class="title">
						<text>店铺地址</text>
						<text style="color:#fa3534">*</text>
					</view>
					<view class="input" style='display:flex;align-items: center;'>
						<u-input  fontSize='12' readonly inputAlign="right" v-model='info.storeAddress'></u-input>
						<image src="../../static/address.png" style="width: 30rpx;height: 33rpx;"></image>
					</view>
				</view>
				<view class="item" style="justify-content: space-between; border:none">
					<view class="title">
						<text>发货仓库</text>
						<text style="color:#fa3534">*</text>
					</view>
					<view class="input" style="width:200rpx;display: flex;justify-content: flex-end;">
						<uni-data-select style="width: 100%;" placeholder='请选择仓库' v-model="info.warehouseId"
							:localdata="warehouseList"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="contentInfo">
					<view class="lineColor"></view><view>门店信息</view>
				</view>
				<view class="item">
					<view class="title">
						<text>姓名</text>
						<text style="color:#fa3534">*</text>
					</view>
					<view class="input">
						<u-input fontSize='12' clearable  v-model.trim='info.storeContacts' placeholder="请输入联系人姓名" inputAlign="right"></u-input>
					</view>
				</view>
				<view class="item" style="justify-content: space-between; border:none">
					<view class="title">
						<text>电话</text>
						<text style="color:#fa3534">*</text>
					</view>
					<view class="input" style="width:300rpx;display: flex;justify-content: flex-end;">
						<u-input fontSize='12' clearable  v-model.trim='info.mobile' placeholder="请输入联系人电话" inputAlign="right"></u-input>
					</view>
				</view>
			</view>
			<view class="content" style="height: 320rpx;">
				<view class="contentInfo">
					<view class="lineColor"></view><view>订单备注</view>
				</view>
				<view class="item" style="border:1px solid #f8f8f8;margin-top:30rpx">
				<u--textarea  placeholderClass='textarea-placeholder' placeholder='请输入备注' v-model="info.remark" count></u--textarea>
				</view>
			</view>
			<!-- <view class="item">
				<view class="title"><text style="color:red;margin-right:5rpx">*</text>店铺名称</view>
				<view class="input">
					<u-input v-model.trim='info.storeName' placeholder="请输入门店名称" inputAlign="right"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="title"><text style="color:red;margin-right:5rpx">*</text>收货人名</view>
				<view class="input">
					<u-input v-model='info.userName' placeholder="请输入收货人姓名" inputAlign="right"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="title"><text style="color:red;margin-right:5rpx">*</text>联系电话</view>
				<view class="input">
					<u-input v-model='info.phone' placeholder="请输入收货人电话" inputAlign="right"></u-input>
				</view>
			</view>
			<view class="item" @click="chooseLoaction">
				<view class="title"><text style="color:red;margin-right:5rpx">*</text>店铺地址</view>
				<view class="input">
					<u-input suffixIcon='map' readonly inputAlign="right" v-model='info.address'></u-input>
				</view>
			</view>
			<view class="item" style="justify-content: space-between; border:none">
				<view class="title"><text style="color:red;margin-right:5rpx">*</text>发货仓库</view>
				<view class="input" style="width:300rpx;display: flex;justify-content: flex-end;">
					<uni-data-select style="width: 100%;" placeholder='请选择仓库' v-model="info.warehouseId"
						:localdata="warehouseList"></uni-data-select>
				</view>
			</view>
			<view class="item" style="border:none">
				<view class="title">订单备注</view>
				<view class="input" style="border:0.5px solid #eee">
					<u--textarea v-model="info.remark" count></u--textarea>
				</view>
			</view> -->
			<view style="margin-top: 100rpx;">
				<u-button :color='color' @click="submit"  shape="circle">下一步,选择材料</u-button>
			</view>
		</view>
		<u-picker :show="warehouseShow" :confirmColor='color' @cancel='close' @close='close' keyName='warehouseName'
			ref="uPicker" @confirm='warehouseConfirm' :columns="warehouseList"></u-picker>
	</view>
</template>
<script>
	let app = getApp();
	import watermark from '@/components/watermark/watermark.vue';
import columnNotice from '../../uni_modules/uview-ui/libs/config/props/columnNotice';
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				warehouseShow: false,
				warehouseList: [],
				watermark: '',
				noticeText: [],
				direction:'column',
				isLogin:false,
				info: {
					storeName: '',
					storeAddress: '',
					mobile:'',
					lat:'',
					lon:'',
					remark:'',
					storeContacts:'',
					warehouseId: '',
				},
			}
		},
		components: {
			watermark
		},
		onShareAppMessage(res) {
			return {
				title: '加创材料',
				path: '/pages/index/index',
			}
		},
		onShow() {
			this.getUserInfo();
			this.getNotice();
			if(!uni.getStorageSync('notice')){
				uni.navigateTo({
					url:'/pages/notice/pageNotice'
				})
			}
		},
		methods: {
			toPath(){
				uni.navigateTo({
					url:'/pages/noticeDetail/index'
				})
			},
			chooseLoaction() {
				uni.chooseLocation({
					success: (res) => {
						this.info.lat = res.latitude;
						this.info.lon = res.longitude;
						this.info.storeAddress = res.address;
					}
				})
			},
			getNotice(){
				uni.$u.http.get('/dataDetail/selectNotice').then(res=>{
					res.map(el=>{
						this.noticeText.push(el.noticeContent);
					})

				})
			},
			getUserInfo() {
				uni.$u.http.get('/user/userInfo').then(async res => {
					if (res) {
						this.isLogin =true;
						this.watermark = res.userName;
						await this.getWarehouseList()

					} else {
						this.isLogin = false;
						this.watermark = ''
					}
				})
			},
			submit() {
				if(!this.isLogin){
					uni.$u.toast('请先登录后再操作!');
					return;
				}
				if(this.info.storeName.trim() == '') {
					uni.$u.toast('请填写门店名称!');
					return;
				}
				if(this.info.storeContacts.trim() == '') {
					uni.$u.toast('请填写门联系人姓名!');
					return;
				}
				if(!uni.$u.test.mobile(this.info.mobile)) {
					uni.$u.toast('请填写正确的联系人电话!');
					return;
				}
				if(this.info.storeAddress.trim() == '') {
					uni.$u.toast('请选择门店详细地址!');
					return;
				}
				if(!this.info.warehouseId) {
					uni.$u.toast('请选择发货仓库!');
					return;
				}
				// const  reg = /.+?(省|市|自治区|自治州|县|区)/g;
				// const cityArr = this.info.address.match(reg);
				// if(!this.info.storeName.match(reg)){
				// 	this.info.storeName = cityArr [0]+cityArr[1]+cityArr [2] + this.info.storeName
				// }
				uni.navigateTo({
					url: '/pages/material/index?type=create&&info=' + encodeURIComponent(JSON.stringify(this.info))
				})
			},
			getWarehouseList() {
				let params = {
					pageSize: 1000000000,
					pageNumber: 1
				}
				uni.$u.http.get('/warehouse/warehouseList', {
					params: params
				}).then(res => {
					res.rows.map(el => {
						el.value = el.warehouseId;
						el.text = el.warehouseName;
					})
					this.warehouseList = res.rows;
				})
			},
			warehouseConfirm(e) {
				this.warehouseName = e.value[0].warehouseName;
				this.warehouseId = e.value[0].warehouseId;
				this.warehouseShow = false;
			},
			close() {
				this.warehouseShow = false;
			},
		}
	}
</script>
<style>
	page{
		background:#f8f8f8;
		font-size: 12px;
	}
</style>
<style lang="scss" scoped>
	.item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		display: flex;
		// justify-content: space-between;
		align-items: center;
	}

	.title {
		width: 120rpx;
		display: flex;
		font-weight: 400;
		justify-content: space-between;
		// text-align: right;
	}

	.input {
		width: calc(100% - 120rpx);
		margin-left: 20rpx;
	}

	.info {
		margin: 20rpx 0 0 20rpx;
		padding: 20rpx;
		font-size: 24rpx;
		font-weight: 700;
		border-left: 10rpx solid #13989a;
	}
	.content{
		padding:20rpx;
		padding-bottom:0;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.01);
		width:calc(100% - 40rpx);
		min-height: 100px;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background-color: white;
	}
	.lineColor{
		width: 5px;
		height: 14px;
		background-color: #13989a;
		border-radius: 4px;
		margin-right: 10px;
	}
	.contentInfo{
		display: flex;
		align-items: center;
		
	}
	.page /deep/.textarea-placeholder{
		font-size: 12px;
		font-weight: 400;
	}
	.page /deep/ .u-textarea__field{
		font-size: 12px;
	}
	.page /deep/.uni-select{
		border:none;
		font-size: 12px;
	}
	.page /deep/ .uni-select__input-placeholder{
		color:#b9b9b9;
	}
</style>